<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/element.css" rel="stylesheet"/>
    <link href="../css/styleindex.css" rel="stylesheet"/>
    <style>
        .el-input__inner{
      border: 0;
      font-size: 1rem;
      text-align: center;
    }.el-input__prefix{
      display: none;
    }
    </style>
</head>
<body style="background:#EFF0F4;">

  <div class="mui-content">
    <div id="vm" class="x-examok" v-cloak>
      <div class="x-header-g" id="header">
        <a class="x-header-arrow" @click="api.closeWin()"></a>
        <div class="x-header-t">巡店管理</div>
      </div>
      <!--  -->
      <div class="x-ico-month x-ico-month2">
        <el-date-picker v-model="cardsmonth" type="month" placeholder="选择月" @change="getmonthdata" format="yyyy 年 MM 月" value-format="yyyyMM" :editable="notkey"></el-date-picker>
      </div>
      <!--  -->
      <el-tabs v-model="activeName" @tab-click="handleClick" stretch="true">
        <el-tab-pane label="制定巡店计划" name="first">
            <div class="x-for-border" v-for="(item,index) in selltarget" :key="item.key">
                <div class="x-pro-row">
                    <div class="x-pro-label">计划巡店时间：</div>
                    <div class="x-pro-input">
                        <el-date-picker v-model="item.plan_time" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :disabled="isfromindex" :editable="notkey"></el-date-picker>
                    </div>
                </div>
                <div class="x-pro-row">
                  <div class="x-pro-label">店面名称：</div>
                  <div class="x-pro-input">
                    <el-select v-model="item.shopid" placeholder="请选择" :disabled="isfromindex">
                        <el-option v-for="item in storenamedata" :key="item.id" :label="item.title" :value="item.id"></el-option>
                      </el-select> 
                  </div>
                </div>
                <div class="x-pro-remove" @click="removeselltarget(index,item.id)" v-show="!isfromindex">删除</div>
            </div>
            <div class="x-pro-addbox" @click="goonentrywork"  v-show="!isfromindex"><span class="x-pro-addicon"></span>继续添加巡店计划</div>
            <div class="x-pro-gobtn" @click="isok" v-show="!isfromindex">提交</div>
        </el-tab-pane>
        <el-tab-pane label="追踪巡店计划" name="second">
            <el-table :data="tabledata" @cell-click="">
                <el-table-column label="计划时间" width="" fixed>
                  <template slot-scope="scope">
                    {{scope.row.plan_time}}
                  </template>
                </el-table-column>
                <el-table-column label="店面名称" width="">
                  <template slot-scope="scope">
                    {{scope.row.shop_title}}
                  </template>
                </el-table-column>
                <el-table-column label="实际巡店时间" width="">
                  <template slot-scope="scope">
                    <div v-if="scope.row.real_time!=''">{{scope.row.real_time}}</div>
                    <div v-else @click="changetime('1',scope.row.id)"><el-button type="text" size="mini">选择</el-button></div>
                  </template>
                </el-table-column>
                <el-table-column label="巡店人" width="">
                  <template slot-scope="scope">
                    <div v-if="scope.row.patrol_username!=''">{{scope.row.patrol_username}}</div>
                    <div v-else @click="changetime('2',scope.row.id)"><el-button type="text" size="mini">选择</el-button></div>
                  </template>
                </el-table-column>
                <el-table-column label="记录检查结果" width="">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="opengo(scope.row.id,scope.row.shop_title)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
        </el-tab-pane>
        <el-tab-pane label="记录反馈信息" name="third">
            <el-table :data="tabledatathird" @cell-click="">
                <el-table-column label="反馈时间" width="" fixed>
                  <template slot-scope="scope">
                    {{scope.row.fb_time}}
                  </template>
                </el-table-column>
                <el-table-column label="反馈店面" width="">
                  <template slot-scope="scope">
                    {{scope.row.shop_title}}
                  </template>
                </el-table-column>
                <el-table-column label="内容类型" width="">
                  <template slot-scope="scope">
                    {{scope.row.cate_title}}
                  </template>
                </el-table-column>
                <el-table-column label="反馈方式" width="">
                  <template slot-scope="scope">
                    {{scope.row.type_title}}
                  </template>
                </el-table-column>
                <el-table-column label="反馈人" width="">
                  <template slot-scope="scope">
                    {{scope.row.username}}
                  </template>
                </el-table-column>
                <el-table-column label="编辑内容" width="">
                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="addfeed('2',scope.row)">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="x-pro-gobtn" @click="addfeed('1')" v-show="!isfromindex">添加新反馈</div>
        </el-tab-pane>
      </el-tabs>
      <!--  -->
      <el-dialog
        title="实际巡店时间"
        :visible.sync="dialogVisible"
        width="80%">
        
        <div class="x-pro-row" style="display: block;">
            <!-- <div class="x-pro-label">计划巡店时间：</div> -->
            <div class="x-pro-input">
                <el-date-picker v-model="storetime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :disabled="isfromindex" :editable="notkey"></el-date-picker>
            </div>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="changeok">确 定</el-button>
        </span>
      </el-dialog>
      <!--  -->
      <el-dialog
        title="巡店人"
        :visible.sync="dialogVisibletwo"
        width="80%">
        
        <div class="x-pro-row" style="display: block;">
            <div class="x-pro-input">
                <el-select v-model="storename" placeholder="请选择" :disabled="isfromindex">
                    <el-option v-for="item in storeuserdata" :key="item.id" :label="item.username" :value="item.id"></el-option>
                  </el-select> 
            </div>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="changeok">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>

  <script type="text/javascript" src="../script/vue.js"></script>
  <script type="text/javascript" src="../script/element.js"></script>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/base.js"></script>
	<script>
apiready = function () {
    $api.fixStatusBar($api.byId('header'));
    api.addEventListener({
        name: 'addFeedback'
    }, function(ret, err) {
        vm.getthird()
    });

    //
    var vm = new Vue({
      el:'#vm',
      data(){
        return{
            cardsmonth:'',
            notkey:false,
            activeName: 'first',
            tabledata:[],
            selltarget:[{
                'plan_time':'',
                'shopid':'',
            }],
            isfromindex:false,
            dialogVisibletwo:false,
            entryworkindex:0,
            storenamedata:'',
            tabstype:0,
            storetime:'',
            dialogVisible:false,
            listid:'',//操作的list id
            storename:'',
            storeuserdata:'',
            tabledatathird:[],

        }
      },
      created:function() {
        var that=this;


      },
      mounted:function(){
        var that=this;
        //当前月份
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        if(month<10){
          month = '' + 0 + month;
        }
        var toMonth = '' + year + month ;
        that.cardsmonth = toMonth;
        that.getnamelist()
      },
      methods: {
        //添加新反馈
        addfeed:function(type,listdesc){
            var that = this;
            api.openWin({
                name: 'addfeed',
                url: './addfeed.html',
                pageParam: {
                    date: that.cardsmonth,
                    type:type,//1新增 2编辑
                    listdesc:listdesc,//编辑页desc
                }
            });
        },
        //
        opengo:function(id,title){
            var that = this;
            api.openWin({
                name: 'storechecklist',
                url: './storechecklist.html',
                pageParam: {
                    id: id,
                    title:title,
                }
            });
        },
        //改变时间
        changetime:function(type,id){
            var that = this;
            that.listid = id;
            if(type=='1'){
                that.dialogVisible = true;
            };
            if(type=='2'){
                that.dialogVisibletwo = true;
                that.getuserdata()
            };
        },
        //获取人员列表
        getuserdata:function(){
            let that=this;
            api.ajax({
                url:baseurl+'api/company/deptUserList',
                methods:'get',
                data:{
                values:{
                        sec: $api.getStorage('apptoken'),
                    }
                }
            },function(ret,err){
                if(ret){
                api.hideProgress();
                console.log(JSON.stringify(ret));
                if(ret.status == 1){
                    that.storeuserdata = ret.data;
                    
                    
                }else{
                    api.toast({
                        msg: ret.msg,
                        duration: 3000,
                        location: 'bottom'
                    });
                }
                }else{
                api.hideProgress();
                console.log(JSON.stringify(err));
                api.toast({
                    msg: err.msg,
                    duration: 3000,
                    location: 'bottom'
                });
                }
            })
        },
        //提交 改变
        changeok:function(){
            let that=this;
            that.dialogVisible = false;
            that.dialogVisibletwo = false;
            api.ajax({
                url:baseurl+'api/patrol/updateContent',
                methods:'get',
                data:{
                values:{
                        sec: $api.getStorage('apptoken'),
                        real_time:that.storetime,
                        patrol_memberid:that.storename,
                        id:that.listid
                    }
                }
            },function(ret,err){
                if(ret){
                api.hideProgress();
                console.log(JSON.stringify(ret));
                if(ret.status == 1){
                    api.toast({
                        msg: ret.msg,
                        duration: 3000,
                        location: 'bottom'
                    });
                    that.gotrainpro()
                    
                    
                }else{
                    api.toast({
                        msg: ret.msg,
                        duration: 3000,
                        location: 'bottom'
                    });
                }
                }else{
                api.hideProgress();
                console.log(JSON.stringify(err));
                api.toast({
                    msg: err.msg,
                    duration: 3000,
                    location: 'bottom'
                });
                }
            })
        },
        //3data
        getthird:function(){
            let that=this;
            api.ajax({
                url:baseurl+'api/patrol/feedbackList',
                methods:'get',
                data:{
                values:{
                    sec: $api.getStorage('apptoken'),
                    date:that.cardsmonth
                    }
                }
            },function(ret,err){
                if(ret){
                api.hideProgress();
                console.log(JSON.stringify(ret));
                if(ret.status == 1){
                    that.tabledatathird = ret.data.list;
                    
                    
                }else{
                    api.toast({
                        msg: ret.msg,
                        duration: 3000,
                        location: 'bottom'
                    });
                }
                }else{
                api.hideProgress();
                console.log(JSON.stringify(err));
                api.toast({
                    msg: err.msg,
                    duration: 3000,
                    location: 'bottom'
                });
                }
            })
        },
        // select data
        getnamelist:function(){
            let that=this;
            api.ajax({
                url:baseurl+'api/company/shopList',
                methods:'get',
                data:{
                values:{
                    sec: $api.getStorage('apptoken')
                    }
                }
            },function(ret,err){
                if(ret){
                api.hideProgress();
                console.log(JSON.stringify(ret));
                if(ret.status == 1){
                    that.storenamedata = ret.data;
                    that.gotrainpro()
                    
                    
                }else{
                    api.toast({
                        msg: ret.msg,
                        duration: 3000,
                        location: 'bottom'
                    });
                }
                }else{
                api.hideProgress();
                console.log(JSON.stringify(err));
                api.toast({
                    msg: err.msg,
                    duration: 3000,
                    location: 'bottom'
                });
                }
            })
        },
        //date
        getmonthdata:function(val){
            var that = this;
            that.cardsmonth = val;
            if (that.tabstype==0) {
                that.gotrainpro()
            } else if(that.tabstype==1){
                that.gotrainpro()
            }else if(that.tabstype==2){
                that.getthird()
            };
        },
        //data
        gotrainpro:function(){
            let that=this;
          api.ajax({
            url:baseurl+'api/patrol/contentList',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                date:that.cardsmonth
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                that.selltarget = ret.data.list;
                that.tabledata = ret.data.list;
                  
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //选项卡
        handleClick:function(tab, event){
            console.log(tab, event);
            let id = event.target.getAttribute('id').split('-');
            let whitetab = id.join('').substring(3,9);
            let that = this;
            if(whitetab=='first'){
                that.tabstype=0;
                that.gotrainpro()
            }else if(whitetab=='second'){
                that.tabstype = 1;
                that.gotrainpro()
            }else if(whitetab=='third'){
                that.tabstype = 2;
                that.getthird()
            }
        },
        //删除
        removeselltarget:function(index,id){
          let that = this;
          console.log(typeof(id)=='undefined');
          var nowin = index;
          if(typeof(id)=='undefined'){//本地删除
            api.confirm({
            title: '操作提示',
            msg: '确定要删除吗？',
            buttons: ['确定','取消']
          }, function(ret, err) {
            var index = ret.buttonIndex;
            if(index == 1){
              //删除
              that.selltarget.splice(nowin,1);//删除全部数组中对应的值
            //   console.log(JSON.stringify(that.selltarget));
            }
          });
          }else{//远程删除
            api.confirm({
            title: '操作提示',
            msg: '确定要删除吗？',
            buttons: ['确定','取消']
          }, function(ret, err) {
            var index = ret.buttonIndex;
            if(index == 1){
              //删除
              that.goremove(id)
            }
          });
            
          }
          
        },
        //删除
        goremove:function(id){
            let that=this;
          console.log(JSON.stringify(that.selltarget));
          api.ajax({
            url:baseurl+'api/patrol/delContent',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                id:id
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
                that.gotrainpro()
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
        //继续添加
        goonentrywork:function(){
            var that = this;
            that.entryworkindex++
            that.selltarget.push({
                'plan_time':'',
                'shopid':'',
            });
        },
        //
        isok:function(){
          let that=this;
          console.log(JSON.stringify(that.selltarget));
          api.ajax({
            url:baseurl+'api/patrol/setContent',
            methods:'get',
            data:{
              values:{
                sec: $api.getStorage('apptoken'),
                date:that.cardsmonth,
                data_json:that.selltarget
              }
            }
          },function(ret,err){
            if(ret){
              api.hideProgress();
              console.log(JSON.stringify(ret));
              if(ret.status == 1){
                api.confirm({
                    title: '提交成功',
                    msg: '',
                    buttons: ['继续编辑', '返回']
                }, function(ret, err) {
                    var index = ret.buttonIndex;
                    if(index=='1'){

                    }else{
                      api.closeWin({});

                    }
                });
              }else{
                api.toast({
                    msg: ret.msg,
                    duration: 3000,
                    location: 'bottom'
                });
              }
            }else{
              api.hideProgress();
              console.log(JSON.stringify(err));
              api.toast({
                  msg: err.msg,
                  duration: 3000,
                  location: 'bottom'
              });
            }
          })
        },
      }
    })
	}


	</script>
</body>
</html>
